<template>
	<view class="bg">
		<xl-navbar title="Radio单选框" fixed shadow></xl-navbar>
		<view class="content">
			<view class="title">基础样式：横向排版，双向绑定</view>
			<xl-radio v-model="checked" :items="items1" @click="clickItem"></xl-radio>
			
			<view class="title">修改图标大小颜色、字体大小颜色</view>
			<xl-radio :items="items1" :iconSize="26" iconColor="#4fc08d" :fontSize="26" fontColor="#4fc08d" @click="clickItem"></xl-radio>
			
			<view class="title">选中加背景</view>
			<xl-radio v-model="checked" :items="items1" showBackground @click="clickItem"></xl-radio>
			
			<view class="title">是否禁用组件</view>
			<xl-radio v-model="checked" :items="items1" disabled @click="clickItem"></xl-radio>
			
			<view class="title">是否可去选，去选后返回空字符串''</view>
			<xl-radio :items="items1" remove @click="clickItem"></xl-radio>
			
			<view class="title">绑定true/false，单个选项</view>
			<xl-radio v-model="checked2" remove></xl-radio>
			
			<view class="title">列向排版，加下划线</view>
			<xl-radio :items="items2" direction="column" underline @click="clickItem"></xl-radio>
			
			<view class="title">对象列表：默认labelName:'name',valueName:'id'</view>
			<xl-radio :items="items3" @click="clickItem"></xl-radio>
			
			<view class="title">对象列表：选项禁用，添加disabled属性</view>
			<xl-radio :items="items4" @click="clickItem"></xl-radio>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted, computed } from "vue";
	const items1 = ref(['篮球','足球','排球'])
	const items2 = ref(['篮球','足球','排球'])
	const items3 = ref([{id: 1, name: '篮球'},{id: 2, name: '足球'},{id: 3, name: '排球'}])
	const items4 = ref([{id: 1, name: '篮球', disabled: true},{id: 2, name: '足球'},{id: 3, name: '排球'}])
	
	const checked = ref('足球')
	const checked2 = ref(false)
	
	function clickItem(itemValue){
		uni.$xl.toast(itemValue)
	}
</script>